<template>
  <div class="category-con mt5 table-gl-w">
    <TableWrap style="flex: 1" @refresh="getList">
      <template #headerLeft>
        <a-space>
          <a-button class="gray-outline" @click="show('add')">新增标签</a-button>
        </a-space>
      </template>
      <template #tableBody>
        <a-table :data="tableData" size="mini" class="table-single-line" :loading="loading" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
          <template #columns>
            <a-table-column title="名称" #cell="{ record }" :width="120">
              <TextLimit position="top" :val="$extract(record, 'dataFromRestApi.name')"></TextLimit>
            </a-table-column>
            <a-table-column title="别名" #cell="{ record }" :width="120">
              <TextLimit position="top" :val="$extract(record, 'dataFromRestApi.slug')"></TextLimit>
            </a-table-column>
            <a-table-column title="描述" #cell="{ record }" :width="120">
              <TextLimit position="top" :val="$extract(record, 'dataFromRestApi.description')"></TextLimit>
            </a-table-column>
            <a-table-column title="商品总数" #cell="{ record }" :width="60">
              {{ $extract(record, 'dataFromRestApi.count') }}
            </a-table-column>
            <a-table-column title="操作" #cell="{ record }" :width="40">
              <a-space>
                <a-button type="text" @click="show('edit', record)">编辑</a-button>
                <a-button type="text" @click="del(record)" style="color: red">删除</a-button>
              </a-space>
            </a-table-column>
          </template>
        </a-table>
      </template>
    </TableWrap>
    <div class="pagination-footer">
      <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
    </div>
  </div>
  <tagDetail v-if="showTagDetailModal" v-model="showTagDetailModal" :shopId="props.shopId" :type="type" :info="info" @save="getList" />
</template>

<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { tagRollPage, batchTag } from '@/api/product'
  import TableWrap from '@/components/TableWrap.vue'
  import tagDetail from './tagDetail.vue'
  const props = defineProps(['shopId'])
  let tableData = ref([{}])
  let pageNation = ref({ total: 0, pageNum: 1, pageSize: 20 })
  let loading = ref(false)
  let showTagDetailModal = ref(false)
  let type = ref('add')
  let info = ref({})
  // 显示弹框
  const show = (showType: string, data?: any) => {
    type.value = showType
    info.value = data
    showTagDetailModal.value = true
  }
  const del = (data: any) => {
    Modal.error({
      title: '删除',
      content: '请再次确认是否要删除标签',
      titleAlign: 'start',
      cancelText: '取消',
      hideCancel: false,
      onOk: async () => {
        let params = {
          param: {
            delete: [data.dataFromRestApi.id],
          },
          shopId: props.shopId,
        }
        const res: any = await batchTag(params)
        if (res.code == 'SUCCESS') {
          Message.success('删除成功。当前操作不是立即生效，请等待几分钟后刷新页面')
          getList()
        }
      },
    })
  }
  // 分页
  const changePage = (val: number) => {
    pageNation.value.pageNum = val
    getList()
  }

  const sizeChange = (val: number) => {
    pageNation.value.pageNum = 1
    pageNation.value.pageSize = val
    getList()
  }
  const getList = async () => {
    let params = {
      shopIdList: [props.shopId],
      needCount: true,
      pageNum: pageNation.value.pageNum,
      pageSize: pageNation.value.pageSize,
    }
    loading.value = true
    const res: any = await tagRollPage(params)
    loading.value = false
    tableData.value = res.data?.list || []
    pageNation.value.total = res.data?.total || 0
  }

  watch(
    () => props.shopId,
    (val) => {
      getList()
    }
  )

  onMounted(() => {
    if (props.shopId) getList()
  })
</script>

<style lang="less" scoped>
  .category-con {
    height: calc(100vh - @menuAndTabHeight - 92px);
    background-color: white;
  }
</style>
